<template>
  <svg @contextmenu.prevent.stop="contextMenuHandler">
    <g :transform="'translate(' + translateX + ',' + translateY + ')rotate('+ rotate +')'" class="cursor-pointer">
      <rect width="100" height="45" fill="transparent" x="0" y="0"></rect>
      <text x="24" y="30" fill="#FFFFFF">{{name}}</text>
      <template v-if="state == 0">
        <line x1="85" y1="2" x2="70" y2="32" stroke="#37B51E" stroke-width="4"></line>
        <line x1="75" y1="40" x2="95" y2="40" stroke="#37B51E" stroke-width="4"></line>
        <circle cx="10" cy="24" r="7" fill="none" stroke="#37B51E" stroke-width="3"/>
      </template>
      <template v-else>
        <line x1="85" y1="2" x2="70" y2="32" stroke="blue" stroke-width="4"></line>
        <line x1="75" y1="40" x2="95" y2="40" stroke="blue" stroke-width="4"></line>
        <circle cx="10" cy="24" r="7" fill="none" stroke="blue" stroke-width="3"/>
      </template>
    </g>
  </svg>
</template>
<script>
export default {
  props: {
    name: {
      required: true, // 控件名称
      type: String
    },
    state: {    // 控件状态
      required: true,
      type: Number,
      default: 0
    },
    controlIndex: { // 控件索引
      required: true,
      type: Number,
    },
    translateX: { // x轴偏移，默认0
      type: Number,
      default: 0
    },
    translateY: { // y轴偏移，默认0
      type: Number,
      default: 0
    },
    rotate: {  // z轴旋转角度,注意不是原地旋转，需要根据x、y轴偏移来调整
      type: Number,
      default: 0
    }
  },
  methods: {
    // 右键事件
    contextMenuHandler() {
      this.$emit('contextmenu', this.controlIndex);
    }
  }
}
</script>
<style lang="less" scoped>
.cursor-pointer {
  cursor: pointer;
}
svg {
  transform-origin: center center;
  background-color: pink;
}
</style>